import React, { useEffect, useState } from 'react';
import './index.less';
import { Space, Stepper, Tag, Checkbox } from 'antd-mobile';
import { HeartOutline } from 'antd-mobile-icons';

interface T {
  cartlist: Array<any>;
  token: string;
  checkone: (id: string, checked: boolean) => void;
  changenum: (id: string, num: number) => void;
}

function ShopOrder(props: T) {
  let { cartlist, token, checkone, changenum } = props;
  return (
    <div className="shop_order">
      {token ? (
        cartlist.length !== 0 ? (
          cartlist.map((item) => {
            return (
              <div key={item._id} className="loginstatus">
                <div className="top">
                  <div>
                    <Checkbox
                      style={{
                        '--icon-size': '16px',
                        '--font-size': '12px',
                        '--gap': '4px',
                      }}
                      checked={item.ischecked}
                      onChange={(val) => {
                        checkone(item._id, val);
                      }}
                    />
                  </div>

                  <div className="top_title">{item.classname}精选</div>
                </div>
                <div className="middle">
                  <div className="left">
                    <div>
                      <Checkbox
                        style={{
                          '--icon-size': '16px',
                          '--font-size': '12px',
                          '--gap': '4px',
                        }}
                        checked={item.ischecked}
                        onChange={(val) => {
                          checkone(item._id, val);
                        }}
                      />
                    </div>
                    <div className="middle_img">
                      <img src={'/api' + '/upload/banner1.jpg'} alt="" />
                    </div>
                  </div>
                  <div className="content">
                    <div className="word">{item.name}</div>
                    <div className="tag">
                      <Tag round color="#f4f4f4">
                        <span style={{ color: '#000' }}>{item.tag}</span>
                      </Tag>
                    </div>
                  </div>
                </div>
                {item.isMiaosha ? (
                  <div className="miaosha">
                    <div className="timeout">秒杀 距离结束还剩06:39:38</div>
                  </div>
                ) : (
                  <></>
                )}
                <div className="bottom">
                  <div className="price">{item.price.toFixed(2)}</div>
                  <div className="num">
                    <Stepper
                      defaultValue={item.num}
                      min={1}
                      max={5}
                      onChange={(value) => {
                        console.log(value);
                        changenum(item._id, value);
                      }}
                    />
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div className="unloginstatus">
            <div
              style={{
                height: '37.5px',
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <Space wrap style={{ fontSize: 24 }}>
                <HeartOutline color="#797979" />
              </Space>
              <div style={{ width: '11.25px' }}></div>
              <span style={{ fontSize: '9.375px', color: '#797979' }}>
                赶快为自己挑点儿喜欢的东西吧
              </span>
            </div>
            <div
              style={{
                height: '37.5px',
                display: 'flex',
                alignItems: 'center',
                marginTop: '22.5px',
              }}
            >
              <div className="button">优惠活动</div>
              <div style={{ width: '22.5px' }}></div>
              <div className="button">返回首页</div>
            </div>
          </div>
        )
      ) : (
        <div className="unloginstatus">
          <div
            style={{ height: '37.5px', display: 'flex', alignItems: 'center' }}
          >
            <Space wrap style={{ fontSize: 24 }}>
              <HeartOutline color="#797979" />
            </Space>
            <div style={{ width: '11.25px' }}></div>
            <span style={{ fontSize: '9.375px', color: '#797979' }}>
              为自己挑点儿喜欢的东西
            </span>
          </div>
          <div
            style={{
              height: '37.5px',
              display: 'flex',
              alignItems: 'center',
              marginTop: '22.5px',
            }}
          >
            <div className="button">优惠活动</div>
            <div style={{ width: '22.5px' }}></div>
            <div className="button">自动登录</div>
          </div>
        </div>
      )}
    </div>
  );
}

export default ShopOrder;
